<template>
<div>
  <div>
    <img  class="inde" src="../assets/images/indexbackground.png" alt="">
  </div>
</div>
  
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import BarChart2 from './dashboard/BarChart2'
import BarChart3 from './dashboard/BarChart3'
import MapChart from './dashboard/MapChart'
import {getDispute,updateDispute,getJFPersonList} from "@/api/business/dispute";
import {getQuestion,getZXPersonList,updateQuestion} from "@/api/business/question";
import {
  getTypeGraphInfo,
  getBusinessInfo,
  getDisQuesInfo,
  getAnalysisInfo,
  getLocationGraphInfo,
  getLocationFinishGraphInfo,
} from '@/api/index'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [240, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    BarChart2,
    BarChart3,
    MapChart,
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      activities: '',
      businessCounts: '',
      height: 0,
      isMapShow: true,
      //表单参数
      form:{},
      // 表单校验
      rules: {
      },
      // 是否咨询显示弹出层
      open: false,
      title:'',
      statusOptions: [],
      personOptions: [],
      isInfo: false
    }
  },
  created() {
    this.getTypeGraph()
    this.getBusiness()
    this.getDisQues()
    this.getAnalysis()
    this.getLocationGraph()
    this.getLocationFinishGraph()
    var height = this.getClientHeight() / 2
    console.log(height, '^^^^^^^^^^^^^^^^^^^')
    this.height = height,
    this.getDicts("sys_dispute_status").then(response => {
      this.statusOptions = response.data;
    });

  },
  beforeMount() {},
  methods: {
     /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            console.log("s:f"+this.form.type);
            if(this.form.type ==2){
              updateDispute(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                });
            }else{
              updateQuestion(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
              });
            }
          } else {
            addQuestion(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
            });
          }
        }
      });
    },
     // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    listJFPerson() {
      getJFPersonList().then(response => {
        this.personOptions = response.data;
      });
    },
    listZXPerson() {
      getZXPersonList().then(response => {
        this.personOptions = response.data;
      });
    },
    statusFormat(row, column) {
      if (row.menuType == "F") {
        return "";
      }
      return this.selectDictLabel(this.statusOptions, row.status);
    },
     // 表单重置
    reset() {
      this.form = {
        id: undefined,
        userId: undefined,
        typeName: undefined,
        title: undefined,
        imgUrl: undefined,
        description: undefined,
        status: "1",
        longitude: undefined,
        latitude: undefined,
        location: undefined,
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined,
        distributionUserId: undefined,
        distributionUser: undefined
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(id,type){
      this.reset();
      if(type == 2){
        this.listJFPerson();
        getDispute(id).then(response => {
        this.form = response.data;
        this.form.type = 2;
        this.open = true;
        this.title = "修改事件信息";

        });
      }else{
         this.listZXPerson();
         getQuestion(id).then(response => {
        this.form = response.data;
        this.form.type = 1;
        this.open = true;
        this.title = "修改问题咨询";

        });
      }
    },
    getClientHeight() {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        var clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight
      } else {
        var clientHeight =
          document.body.clientHeight > document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight
      }
      return clientHeight
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    /** 获取不同类型的百分比报表数据 */
    getTypeGraph() {
      this.loading = true
      getTypeGraphInfo().then((res) => {})
    },
    /** 获取业务量统计报表数据 */
    getBusiness() {
      this.loading = true
      getBusinessInfo().then((res) => {
        if (res.code == 200) {
          this.businessCounts = res.data
        }
      })
    },
    /** 获取事件报警数据 */
    getDisQues() {
      this.loading = true
      getDisQuesInfo().then((res) => {
        if (res.code == 200) {
          this.activities = res.data
        }
      })
    },
    /** 获取咨询故障统计数量数据 */
    getAnalysis() {
      this.loading = true
      getAnalysisInfo().then((res) => {})
    },
    /** 获取不同类型的百分比报表数据 */
    getLocationGraph() {
      this.loading = true
      getLocationGraphInfo().then((res) => {})
    },
    /** 获取满意度报表数据 */
    getLocationFinishGraph() {
      this.loading = true
      getLocationFinishGraphInfo().then((res) => {})
    },
    activeClassCount(index) {
      console.log(33333)
      console.log(index)
      return index / 2 == 0 ? 'activeClass' : 'activeClass2'
    },
  },
}
</script>

<style lang="scss" scoped>

.inde{
  height: 100%;
  width: 100%;
  
  margin: 0px;
  background: url("../assets/images/indexbackground.png") no-repeat;
  background-size: cover;
  
}
.el-input.is-disabled .el-input__inner {
color: #fff;
background: #fff;
}

.el-input.is-disabled .el-input__inner {
    background-color: #FFFFFF;
    border-color: #dfe4ed;
    color: #606266;
    cursor: not-allowed;
}
.el-range-editor.is-disabled input{
color: #fff;
background: #fff;
}
.el-checkbox__input.is-disabled + span.el-checkbox__label{
color: #fff;
background: #fff;
}
.el-radio__input.is-disabled + span.el-radio__label{
color: #fff;
background: #fff;
}
.el-tag.el-tag--info{
color: #fff;
background: #fff;
}
.el-textarea.is-disabled .el-textarea__inner{
color: #fff;
background: #fff;
}

.activeClass {
  flex: 1;
  margin-top: 10px;
  border-right: 1px solid #979797;
  padding: 0 15px;
  box-sizing: border-box;
}
.activeClass2 {
  flex: 1;
  margin-top: 10px;
  padding: 0 15px;
  box-sizing: border-box;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.change-btns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#span1 p{
  color: #1890ff;
}

#span1 p:hover {
  color: #00bfff;
}
</style>
